<template>
  <view class="feature-menu">
    <public-header title="设置"></public-header>
    <view class="content-box">
      <view class="bg-gray container">
        <o-row gutter="10">
          <o-col span="8" v-for="item in list">
            <view class="menu-tow-box">
              <view class="top-content">
                <view>{{item.title}}</view>
              </view>
              <view class="bottom-content">
                <view @click="toPages(menu.url)" :class="{disabled:!menuAuth[menu.no]}" class="menu-card-item"
                  v-for="menu in item.menus">
                  <image class="image-icon" :src="menu.icon" />
                  <view class="right-content">{{menu.title}}</view>
                </view>
                <!-- <view @click="toPages('/pages/main/staffMgt/staffMgt?title=员工管理')" class="menu-card-item">
                  <image class="image-icon" src="/static/icons/person.png" />
                  <view class="right-content">员工管理</view>
                </view>
                <view @click="toPages('/pages/main/setup/handovermgt/index?title=交接班','bxretail_aio_change_shifts')"
                  class="menu-card-item">
                  <image class="image-icon" src="/static/images/setup/static/jx.png" />
                  <view class="right-content">交接班</view>
                </view>
                <view @click="toPages('/pages/main/resetPwd/resetPwd?title=修改密码','bxretail_aio_change_password')"
                  class="menu-card-item">
                  <image class="image-icon" src="/static/images/setup/static/xgmm.png" />
                  <view class="right-content">修改密码</view>
                </view> -->
              </view>
            </view>
          </o-col>
          <!-- <o-col span="8">
            <view class="menu-tow-box">
              <view class="top-content">
                <view>硬件管理</view>
              </view>
              <view class="bottom-content">
                <view
                  @click="toPages('/pages/main/setGoodsViewMode/setGoodsViewMode?title=基础设置','bxretail_aio_foundation_set')"
                  class="menu-card-item">
                  <image class="image-icon" src="/static//icons/jcsz.png" />
                  <view class="right-content">基础设置</view>
                </view>
                <view @click="toPages('/pages/main/lockScreen/lockScreen?title=锁屏设置','bxretail_aio_lock_screen')"
                  class="menu-card-item">
                  <image class="image-icon" src="/static/images/setup/static/screen-lock-icon.png" />
                  <view class="right-content">收银机锁屏设置</view>
                </view>
                <view
                  @click="toPages('/pages/main/setup/cloudTrumpet/index?title=云喇叭设备管理','bxretail_aio_cloud_trumpet')"
                  class="menu-card-item">
                  <image class="image-icon" src="/static/images/setup/static/cloudTrumpetControl.png" />
                  <view class="right-content">云喇叭设备管理</view>
                </view>
                <view @click="toPages('/pages/main/setup/cloudPrint/index?title=云打印设备管理','bxretail_aio_cloud_printing')"
                  class="menu-card-item">
                  <image class="image-icon" src="/static/images/setup/static/cloudPrintControl.png" />
                  <view class="right-content">云打印设备管理</view>
                </view>
              </view>
            </view>
          </o-col>
          <o-col span="8">
            <view class="menu-tow-box">
              <view class="top-content">
                <view>支付管理</view>
              </view>
              <view class="bottom-content">
                <view @click="toPages('/pages/main/setup/pay/index?title=支付管理','bxretail_aio_pay_manage')"
                  class="menu-card-item">
                  <image class="image-icon" src="/static/images/setup/static/pay.png" />
                  <view class="right-content">支付管理</view>
                </view>
              </view>
            </view>
          </o-col> -->
        </o-row>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [{
            title: '门店管理',
            menus: [{
                title: '门店信息',
                url: '/pages/main/storeInfo/storeInfo?title=门店信息',
                no: 'bxretail_aio_store_info',
                icon: '/static/icons/storeInfo.png'
              },
              {
                title: '员工管理',
                url: '/pages/main/staffMgt/staffMgt?title=员工管理',
                no: 'bxretail_aio_staff_manage',
                icon: '/static/icons/person.png'
              },
              {
                title: '交接班',
                url: '/pages/main/setup/handovermgt/index?title=交接班',
                no: 'bxretail_aio_change_shifts',
                icon: '/static/images/setup/static/jx.png'
              },
              {
                title: '修改密码',
                url: '/pages/main/resetPwd/resetPwd?title=修改密码',
                no: 'bxretail_aio_change_password',
                icon: '/static/images/setup/static/xgmm.png'
              }
            ]
          },
          {
            title: '硬件管理',
            menus: [{
                title: '基础设置',
                url: '/pages/main/setGoodsViewMode/setGoodsViewMode?title=基础设置',
                no: 'bxretail_aio_foundation_set',
                icon: '/static//icons/jcsz.png'
              },
              {
                title: '收银机锁屏设置',
                url: '/pages/main/lockScreen/lockScreen?title=锁屏设置',
                no: 'bxretail_aio_lock_screen',
                icon: '/static/images/setup/static/screen-lock-icon.png'
              },
              {
                title: '云喇叭设备管理',
                url: '/pages/main/setup/cloudTrumpet/index?title=云喇叭设备管理',
                no: 'bxretail_aio_cloud_trumpet',
                icon: '/static/images/setup/static/cloudTrumpetControl.png'
              },
              {
                title: '云打印设备管理',
                url: '/pages/main/setup/cloudPrint/index?title=云打印设备管理',
                no: 'bxretail_aio_cloud_printing',
                icon: '/static/images/setup/static/cloudPrintControl.png'
              }
            ]
          },
          {
            title: '支付管理',
            menus: [{
              title: '支付管理',
              url: '/pages/main/setup/pay/index?title=支付管理',
              no: 'bxretail_aio_pay_manage',
              icon: '/static/images/setup/static/pay.png'
            }]
          }
        ]
      }
    },
    methods: {
      toPages(target) {
        if (target) {
          uni.navigateTo({
            url: target
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .feature-menu {
    // background-color: $retail-color-primary;
    // width: 100%;
    width: calc(100vw - 0rem);
    // min-height: calc(100vh - 6rem); //
    height: 100vh;
    // width: calc(100vw - 20rem);
    // height: calc(100vh - 12rem);
    // padding: 0rem 6rem;
    color: #333;
    // font-size: 18px;
    display: flex;
    // flex-direction: row;
  }


  .container {
    width: 100%;
  }



  .menu-card-item {
    display: flex;
    cursor: pointer;
  }

  .content-box {
    padding: 9rem 3rem;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
  }

  .menu-tow-box {
    border-radius: 4rpx;
    // box-shadow: 0px 1px 2px #666;
    background-color: #fff;
    padding: 3rem;
    border-radius: 1rem;

    .top-content {
      // font-size: 32px;
      font-size: $retail-font-size-lg;
      padding: 3rem 4rem;
      font-weight: 700;
      color: #333333;

    }

    .bottom-content {
      .menu-card-item {
        border: 1px solid #e5e5e5;
        margin-bottom: 20px;
        border-radius: 4px;
        padding: 1.4rem 5rem;
        height: 13.2rem;

        .right-content {
          padding-left: 3rem;
          display: flex;
          align-items: center;
          height: 100%;
          font-size: $retail-font-size-base;
          font-weight: 700;
        }
      }
    }

    .image-icon {
      width: 9.6rem;
      height: 9.6rem;
    }
  }

  .menu-grid-box {
    width: 70%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
